<template>
    <div>
        <van-nav-bar fixed class="details-h">
            <template #left>
                <van-icon name="arrow-left" />
            </template>
            <template #title class="details-center">
                <img class="img" src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="">
                <span>作者</span>
            </template>
            <template #right>
                <van-icon name="ellipsis" />
            </template>
        </van-nav-bar>

        <div class="details-c">
            <ul>
                <li><img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt=""></li>
                <li><img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt=""></li>
                <li><img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt=""></li>
                <li><img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt=""></li>
                <li><img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt=""></li>
                <li><img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt=""></li>
                <li><img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt=""></li>
                <li><img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt=""></li>
                <li><img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt=""></li>
            </ul>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.details-h {
    ::v-deep .van-nav-bar__title{
        margin-left: 60px;
    }
    .img {
        width: 35px;
        height: 35px;
        vertical-align: middle;
        border-radius: 50%;
    }
}
.details-c {
    margin-top: 46px;
    ul {
        width: 100%;
        display: flex;
        flex-wrap:wrap;
        li {
            width: 32%;
            img {
                width: 100%;
            }
        }
    }
}
</style>